<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

let chart = ref();

function chartInit() {
  let myChart = echarts.init(chart.value);

  let option = {
    tooltip: {
      axisPointer: {
        type: "cross",
      },
    },
    legend: {},
    grid: {
      top: "10%",
      left: "2%",
      right: "2%",
      bottom: "2%",
      containLabel: true, //包含坐标轴标签在内
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false, //两个相邻类目轴两边留白
        data: ["1", "2", "3", "4", "5", "6", "7"],
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: [
      {
        type: "line",
        name: "情况一",
        stack: "Total",
        data: [20, 132, 101, 134, 90, 230, 320],
        areaStyle: {},
        smooth: true,
      },
      {
        type: "line",
        name: "情况二",
        stack: "Total",
        data: [20, 132, 101, 134, 90, 230, 320],
        areaStyle: {},
        smooth: true, //对折线进行平滑
      },
      {
        type: "line",
        name: "情况三",
        stack: "Total",
        data: [120, 132, 101, 134, 90, 230, 320],
        areaStyle: {},
        smooth: true,
      },
      {
        type: "line",
        name: "情况四",
        stack: "Total",
        data: [320, 132, 101, 134, 90, 230, 320],
        areaStyle: {},
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
onMounted(() => {
  chartInit();
});
</script>

<template>
  <div class="boxstyle" style="margin-bottom: 10px">
    <div cl="title">标题</div>
    <div ref="chart" style="width: 100%; height: 240px"></div>
  </div>
</template>

<style scoped></style>
